<!--
 * @Author: 王坤
 * @LastEditors: 王坤
 * @Description: 标签
-->
<template>
  <el-tag class="lc-tag" :closable="closable" :effect="effect" :size="size" :type="type">
    {{ reLabel }}
  </el-tag>
</template>

<script setup>
import { getOptionsFromDict } from '@/apis';
// import { useAppStore } from '@/store/modules/app';
import { computed, ref } from 'vue';
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  closable: {
    type: Boolean,
    default: false
  },
  effect: {
    type: String,
    default: 'light'
  },
  size: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'primary'
  },
  label: {
    type: String,
    default: '标签'
  },
  optionsDict: {
    type: [String, Number],
    default: ''
  },
  options: {
    type: Array,
    default: () => []
  }
});
const reOptions = ref(props.options || []);
// const appStore = useAppStore();
const reLabel = computed(() => {
  const reOption = reOptions.value.find((e) => e.value === props.modelValue);
  return reOption?.label || props.label;
});
async function loadOptions() {
  if (!props.optionsDict) return;
  const res = getOptionsFromDict(props.optionsDict, {});
  reOptions.value = (res || []).map((item) => {
    return {
      label: item.label,
      value: item.value
    };
  });
}
loadOptions();
</script>
